<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
	      content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link href="${ctx}/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
	<link href="${ctx}/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
	<link href="${ctx}/css/style.min862f.css?v=4.1.0" rel="stylesheet">
	<![endif]-->
	<title>修改密码</title>
	<style type="text/css">
		input.error {
			background: rgb(251, 227, 228);
			border: 1px solid #fbc2c4;
			color:red;
		}

		label.error {
			color: red;
			display: inline-block;
			margin-left: 1.5em;
		}
	</style>
</head>

<body>
<div class="wrapper wrapper-content">
	<div class="row">
		<div class="col-sm-12">
			<form class="form-horizontal" id="change-password">
				<div class="form-group">
					<label class="control-label col-sm-4">原始密码:</label>
					<div class="col-sm-8">
						<input type="password" class="form-control" name="oldPassword">
					</div>
				</div>
				<div class="form-group">
					<label class="control-label col-sm-4">新密码:</label>
					<div class="col-sm-8">
						<input type="password" class="form-control" id="newPassword" name="newPassword">
					</div>
				</div>
				<div class="form-group">
					<label class="control-label col-sm-4">确认密码:</label>
					<div class="col-sm-8">
						<input type="password" class="form-control" name="confirmPassword">
					</div>
				</div>
				<div class="form-group text-center">
					<button type="submit" class="btn btn-primary">修改</button>
					<button type="reset" class="btn btn-default">取消</button>
				</div>
			</form>
		</div>
	</div>
</div>

<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctx}/js/plugins/layer/layer.js"></script>
<script src="${ctx}/js/plugins/validate/jquery.validate.min.js"></script>
<script src="${ctx}/js/plugins/validate/validate-methods.js"></script>
<script src="${ctx}/js/plugins/validate/jquery-form.js"></script>
<script src="${ctx}/js/plugins/validate/messages_zh.min.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		var e = "<i class='fa fa-times-circle'></i> ";
		// 在键盘按下并释放及提交后验证提交表单
		var validator = $("#change-password").validate({
			submitHandler:function(form) {
				$(form).ajaxSubmit({
					url:"${ctx}/user/changePassword",
					data : $(form).serialize(),
					type : "POST",
					dataType :"JSON",
					success : function(data) {
						if(data.status==1001){
							layer.alert('密码更改成功!', {
								icon: 1,
								skin: 'layer-ext-moon'
							})
							validator.resetForm();
						}else if(data.status==1002){
							layer.alert('两次密码不一致!', {
								icon: 3,
								skin: 'layer-ext-moon'
							})
							validator.resetForm();
						}else if(data.status==1003){
							layer.alert('原始密码不正确!', {
								icon: 3,
								skin: 'layer-ext-moon'
							})
							validator.resetForm();
						}else{
							layer.alert('密码更改失败!', {
								icon: 2,
								skin: 'layer-ext-moon'
							})
							validator.resetForm();
						}
					}
				});
			},
			errorPlacement : function(error, element) {
				element.closest('.form-group').append(error);//显示错误消息提示
			},
			rules : {
				oldPassword : {
					required : true,
					minlength : 6
				},
				newPassword : {
					required : true,
					minlength : 6
				},
				confirmPassword : {
					required : true,
					minlength : 6,
					equalTo : "#newPassword"
				}
			},
			messages : {
				oldPassword : {
					required : e+"请输入原始密码",
					minlength : e+"密码长度不能小于 6 个字符"
				},
				newPassword : {
					required : e+"请输入新密码",
					minlength : e+"密码长度不能小于 6 个字符"
				},
				confirmPassword : {
					required : e+"请再次输入新密码",
					minlength : e+"密码长度不能小于 6 个字符",
					equalTo : e+"两次密码输入不一致"
				}
			}
		});
	});
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>

</html>